/* body{
    overflow-x: hidden !important;
} */
#preloader {
    background: rgb(255, 255, 255) url(../images/1495.gif) no-repeat center center;
    /* background-size: 20%; */
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
  }
a{
    text-decoration: none;
}
  .text-orange{
    color: #ee5a2a;
  }
  .bg-orange{
      background-color: #ee5a2a;
  }
.text-wt-700{
    font-weight: 700;
}
.ft-sz-25{
    font-size: 25px;
}
.ft-sz-18{
    font-size: 18px;
}
  #service_banner {
    background-color: #ee5a2a;
    height: 75vh;
    clip-path: polygon(0% 0%, 100% 0%, 100% 83%, 25% 100%, 0% 83%);
  }
  #service_banner img{
      max-width: 320px;
      margin-top: 22%;
  }
  .navbar-toggler-icon{
    color: #fff !important;
  }
 
  .navbar img{
      width: 150px;
  }
  #service_banner{
      margin-top: -60px;
  }
  .navbar a{
    color: #fff;
    font-weight: 500;
}
.navbar a:hover{
    color: #000;
}
nav { 
    background: linear-gradient(to bottom, #ee5a2a, #ee5a2a 70%,#ee5a2a);
  }
  
  #service_banner h2,#service_banner h3,#service_banner p{
      color: #fff;
    position: relative;
    top: 28%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  #service_banner h2{
      font-weight: 300;
      font-size: 70px;
  }
  #service_banner h3{
    font-weight: 600;
    font-size: 30px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#service_banner p{
    margin-top: -45px;
}

/* -----------------service design----------------- */
.main-timeline{ font-family: 'Poppins', sans-serif; }
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline .timeline{
    width: calc(50% + 65px);
    padding: 0 123px 0 0;
    float: left; 
}
.main-timeline .timeline-content{
    color: #F63959;
    background: linear-gradient(to top,transparent 50%, #F63959 50%);
    text-align: center;
    min-height: 170px;
    padding: 15px;
    border-radius: 40px;
    display: block;
    position: relative;
    z-index: 1;
}
.main-timeline .timeline-content:before{
    content: '';
    background-color: #fff;
    border-radius: 35px;
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    bottom: 7px;
    z-index: -1;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-year{
    color: #fff;
    background: linear-gradient(transparent 50%, #F63959 50%);
    font-size: 33px;
    line-height: 130px;
    height: 130px;
    width: 130px;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: -123px;
    top: 50%;
    z-index: 1;
}
.main-timeline .timeline-year:before{
    content: '';
    background-color: #F63959;
    border-radius: inherit;
    border: 10px solid #fff;
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    bottom: 7px;
    z-index: -1;
}
.main-timeline .timeline-icon{ font-size: 35px; }
.main-timeline .title{
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0 0 8px;
}
.main-timeline .description{
    color: #777;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 18px;
    margin: 0;
}
.main-timeline .timeline:nth-child(even){
    padding: 0 0 0 123px;
    float: right;
}
.main-timeline .timeline:nth-child(even) .timeline-year{
    right: auto;
    left: -123px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-content{
    color: #4C39D3;
    background: linear-gradient(to top,transparent 50%, #4C39D3 50%);
    border-color: #4C39D3;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-year{
    background: linear-gradient(transparent 50%, #4C39D3 50%);
}
.main-timeline .timeline:nth-child(4n+2) .timeline-year:before{ background: #4C39D3; }
.main-timeline .timeline:nth-child(4n+3) .timeline-content{
    color: #FC562E;
    background: linear-gradient(to top,transparent 50%, #FC562E 50%);
    border-color: #FC562E;
}
.main-timeline .timeline:nth-child(4n+3) .timeline-year{
    background: linear-gradient(transparent 50%, #FC562E 50%);
}
.main-timeline .timeline:nth-child(4n+3) .timeline-year:before{ background: #FC562E; }
.main-timeline .timeline:nth-child(4n+4) .timeline-content{
    color: #358AE6;
    background: linear-gradient(to top,transparent 50%, #358AE6 50%);
    border-color: #358AE6;
}
.main-timeline .timeline:nth-child(4n+4) .timeline-year{
    background: linear-gradient(transparent 50%, #358AE6 50%);
}
.main-timeline .timeline:nth-child(4n+4) .timeline-year:before{ background: #358AE6; }
@media screen and (max-width:767px){
    .main-timeline .timeline{
        width: 100%;
        margin: 0 0 30px;
    }  
    #service_banner img{
        max-width: 250px;
        margin-top: 35%;
    } 
}
@media screen and (max-width:576px){
    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even){
        padding: 123px 0 0 0;
    }
    .main-timeline .timeline-year,
    .main-timeline .timeline:nth-child(even) .timeline-year{
        transform: translateY(0) translateX(-50%);
        left: 50%;
        right: auto;
        top: -123px;
    }
    #service_banner {
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 25% 100%, 0% 87%);
      }
}
.how-we{
    background-color: #ececeb;
}
#how-we-work i{
    font-size: 50px;
    color: #ee5a2a;
    margin-left: -20px;
    margin-top: -20px;
}
#how-we-work .work-logo{
    width: 100px;
    height: 100px;
    padding: 40px;
    border: 4px dotted #888786;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;

}
/* #how-we-work .content{
    text-align: justify;
} */
.process:hover .work-logo{
    border: 3px solid #ee5a2a !important;
}
.process{
    padding:10px;
    border-radius: 15px;
}
.process:hover {
    box-shadow: 5px 10px 18px #888888 !important;
}
#lets-create {

    background-color: #ee5a2a;
    /* min-height: 35vh; */
    clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 20% 100%, 0% 78%);
  }
  #lets-create h2,#lets-create h3,#lets-create .btn{
    color: #fff;
  position: relative;
  top: 30%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#lets-create .btn:hover, #service_banner .btn:hover{
    background-color: #ee5a2a !important;
    color: #fff !important;
    border: 1px solid #fff;
}
#lets-create .btn:hover a{
  color: #fff;
}
#lets-create h3{
  font-weight: 300;
  margin: -5px 0 12px 20px;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#lets-create img{
    height: 200px;
    width: 250px; 
}

/* ----------------owl carousel clients section-------------- */
.wrapper{
    width: 100%;
  }
  .carousel{
    max-width: 1200px;
    margin: auto;
    padding: 0 30px;
  }
  .carousel .card{
    color: rgb(210,91,41);
    text-align: center;
    height: 200px;
    width: 200px;
    /* margin: 20px 0; */
    margin-left: auto;
    margin-right: auto;
    /* line-height: 200px; */
    border-radius: 50%;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
  }
  .carousel img{
      width: 150px !important;
      margin-top: 35%;
      margin-left: auto;
      margin-right: auto;
  }
  .carousel .card-7 img{
    width: 120px !important;
    margin-top: 20%;
}
.carousel .card-13 img{
    width: 100px !important;
    margin-top: 30%;
    border-radius: 5px;
}
  
  .owl-dots{
    text-align: center;
    margin-top: 40px;
  }
  .owl-dot{
    height: 8px;
    width: 20px;
    margin: 0 5px;
    outline: none;
    border-radius: 14px;
    border: 2px solid rgb(210,91,41)!important;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
  }
  .owl-dot.active,
  .owl-dot:hover{
    background: rgb(210,91,41)!important;
  }

  /* ----------------testimonial----------------- */
  #textimonial-section{

    background-color: #ececeb;
    /* min-height: 35vh; */
    clip-path: polygon(0% 0%, 100% 0%, 100% 83%, 50% 100%, 0% 83%);
  }
  .testimonial-content img{
      width: 120px !important;
      border: 1px solid #fff;
      border-radius: 5px;
      margin-left:auto ;
      margin-right: auto;
  }
  /* .testimonial-img{
      border: 1px solid #fff;
      border-radius: 50%;
  } */
  
  @media only screen and (max-width: 815px) {
   
    #service_banner h2{
        font-size: 50px;
    }
    #service_banner h3{
      font-size: 25px;
      top: 32%
  }
  #service_banner p{
    margin-top: -25px;
}
  }
  @media only screen and (max-width: 565px) {
   
    #lets-create img{
        max-height: 150px;
        max-width: 150px; 
    }
    #lets-create h2{
        font-size:20px;
    }
    #lets-create h3{
        font-size:18px;
    }
  }
  @media only screen and (max-width: 350px) {
    #lets-create{
        height: 32vh;
    }
   
    #lets-create img{
        height: 100px;
        width: 100px; 
    }
    #lets-create a{
        font-weight: 400;
    }
    #lets-create {

        clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 20% 100%, 0% 78%);
      }
  }
  footer ul{
      list-style-type: none;
  }
  footer a{
    color: #fff;
}
.footer-main{
    position: relative;
}
.form-float{
    position: absolute;
    border: 2px groove #ee5a2a;
    left: 60%;
    top: -7%;
    right: 3%;
    
}
.form-float input, .modal input{
    border: none !important;
    outline: none !important;
    border-bottom: 1px groove #ee5a2a !important;
    
    
}
.subscribe input[type=email]{
    outline: none;
    border: none;
    border: 1px solid #fff;
    width: 400px;
    color: #fff;
}
.subscribe input[type=submit]{
    margin-left: -35px;
}
@media only screen and (max-width: 1000px) {
    .form-float{ 
        left: 55%;
        top: 30%;
    }
}
@media only screen and (max-width: 992px) {
    .form-float{ 
        left: 55%;
        top: 44%;
    }
}
@media only screen and (max-width: 770px) {
    .form-float{ 
      position:unset;
    }
}
@media only screen and (max-width: 520px) {
    .subscribe input[type=email]{
        width: 200px;
    }
    #textimonial-section .owl-dot{
        display: none;
    }
    
}
@media only screen and (max-width: 350px) {
    .subscribe input[type=email]{
        width: 150px;
    }
    #service_banner {
        clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 25% 100%, 0% 95%);
      }

}
.need-pipe::before{
content: '| ';
font-weight: 900;
color: #f06b3f;
}
.about p{
text-align: justify;
}

#thank{
  margin-top: 30vh;
}
#thank h1{
  color: #ee5a2a;
  font-weight: 900;
 
}
#thank img{
  width:250px;
}

@media (max-width: 576px) {
  .logo img {
    width: 80px;
  }
}